<template>
  <div class="Books">
    <el-row style="border: 1px red;">
      <!-- 图书卡片区域，显示图书封面、作者等信息 -->
      <el-card v-for="item in bookList.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="item.id" style="width: 135px; margin-bottom: 20px; height: 233px; float: left; margin-right: 15px" class="book" bodyStyle="padding:10px" shadow="hover">
        <el-tooltip effect="dark" placement="right" :open-delay="700">
          <!-- 使用具名插槽，方便定制文字提示。另外ele是不是不支持vue2.6？-->
          <!-- 图书书名 -->
          <p slot="content" style="font-size: 14px; margin-bottom: 6px">{{ item.title }}</p>
          <!-- 图书作者、出版日期，出版社 -->
          <p slot="content" style="font-size: 13px; margin-bottom: 6px">
            <span>{{ item.author }}</span> / <span>{{ item.date }}</span> /
            <span>{{ item.press }}</span>
          </p>
          <!-- 图书摘要 -->
          <p class="abstract" slot="content" style="width: 300px">{{ item.abs }}</p>
          <div class="cover">
            <img :src="item.cover" alt="封面" />
          </div>
        </el-tooltip>
        <!-- 图书文字信息 -->
        <div class="info">
          <div class="title">
            <a href="">{{ item.title }}</a>
          </div>
          <div class="author">{{ item.author }}</div>
        </div>
      </el-card>
    </el-row>
    <el-row>
      <!-- 分页 -->
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pagesize" :total="bookList.length"> </el-pagination>
    </el-row>
  </div>
</template>

<script>

export default {
  name: "Books",
  data() {
    return {
      bookList: [],
      currentPage: 1,
      pagesize: 18,
    };
  },
  created() {
    this.loadBooks();
  },
  methods: {
    // 加载图书
    async loadBooks() {
      const { data: res } = await this.$http.get("/library/books");
      this.bookList = res;
    },

    // 监听页码变化
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
  },
};
</script>

<style lang="less" scoped>
.Books {
  width: 990px;
  margin: 0 auto;

  .abstract {
    display: block;
    line-height: 17px;
  }

  .cover {
    width: 115px;
    height: 172px;
    margin-bottom: 7px;
    cursor: pointer;
    overflow: hidden;
    img {
      width: 115px;
      height: 172px;
    }
  }

  .info {
    .title {
      font-size: 14px;
      text-align: left;
    }
    .author {
      color: #333;
      width: 102px;
      font-size: 13px;
      margin-bottom: 6px;
      text-align: left;
      text-overflow: ellipsis;
    }
  }
}
</style>
